import {
  Button,
  Cell,
  Form,
  Input,
  InputNumber,
  Picker,
} from "@nutui/nutui-react-taro";
import "./index.less";
import { useRequest } from "ahooks";
import { getWithdrawApi, withDrawalApi } from "../../../servers/servers";
import Taro from "@tarojs/taro";
import { useState } from "react";
const withdrawal = () => {
  // 提现信息
  const { data: withdrawInfo, run } = useRequest(async () => {
    const _res = await getWithdrawApi();
    return _res?.data;
  });
  const [form] = Form.useForm();

  const [visible, setVisible] = useState(false);
  const [baseDesc, setBaseDesc] = useState("");

  // 当前选中的方式
  const [currentType, setCurrentType] = useState("");

  const listData1 = [
    [
      { value: "zfb", text: "支付宝" },
      { value: "wexin", text: "微信" },
      { value: "card", text: "银行卡" },
    ],
  ];
  const changePicker = (list, option, columnIndex) => {
    console.log(columnIndex, option);
  };
  const confirmPicker = (options, values) => {
    console.log("valuesvaluesvalues", values);
    setCurrentType(values?.[0]);
    let description = "";
    options.forEach((option) => {
      description += ` ${option.text}`;
    });
    setBaseDesc(description);
  };

  const [account, setAccount] = useState("");

  return (
    <>
      <Picker
        title="请选择提现方式"
        visible={visible}
        options={listData1}
        onConfirm={(list, values) => confirmPicker(list, values)}
        onClose={() => setVisible(false)}
        onChange={changePicker}
      />

      <Form
        form={form}
        // className="withdrawal_form"
        footer={false}
        style={{ "--nutui-form-item-label-width": "60px" }}
        onFinish={async (values) => {
          try {
            if (!currentType) {
              return Taro.showToast({
                title: "请选择提现方式",
                duration: 3000,
                icon: "none",
              });
            }

            if (!account) {
              return Taro.showToast({
                title: "请输入收款账号",
                duration: 3000,
                icon: "none",
              });
            }
            await withDrawalApi({
              ...values,
              mode: currentType,
              account,
            });

            Taro.showToast({
              title: "提现成功，请等待管理员审核并发送",
              icon: "none",
              duration: 5000,
            });

            run?.();
          } catch (error) {}
        }}
      >
        <Form.Item label="提现方式">
          <Cell
            title="请选择提现方式"
            description={baseDesc}
            onClick={() => setVisible(!visible)}
            style={{
              paddingTop: 0,
            }}
          />
          <Picker
            title="请选择提现方式"
            visible={visible}
            options={listData1}
            onConfirm={(list, values) => confirmPicker(list, values)}
            onClose={() => setVisible(false)}
            onChange={changePicker}
          />
          {/* <Input placeholder="请输入金额" type="digit" /> */}
        </Form.Item>

        {currentType && (
          <Form.Item
            label={
              currentType === "card"
                ? "银行卡号"
                : currentType === "zfb"
                ? "支付宝账号"
                : "微信号"
            }
            name="account"
          >
            <Input
              placeholder={`请输入${
                currentType === "card"
                  ? "银行卡号"
                  : currentType === "zfb"
                  ? "支付宝账号"
                  : "微信号"
              }`}
              onChange={(e) => {
                console.log("eeeeeee", e);
                setAccount(e);
              }}
              type="text"
            />
          </Form.Item>
        )}

        {currentType && (
          <Form.Item label="真实姓名" name="name">
            <Input placeholder="请输入真实姓名" type="text" />
          </Form.Item>
        )}

        {currentType === "card" && (
          <Form.Item label="开户行" name="opening_bank">
            <Input placeholder="请输入开户行" type="text" />
          </Form.Item>
        )}

        {currentType && (
          <Form.Item label="提现金额" name="money">
            {/* <InputNumber
            type="number"
            placeholder="请输入提现金额"
            min={0}
            max={withdrawInfo?.withdrawal?.withdrawable}
            step={5}
          /> */}
            <InputNumber
              placeholder="请输入提现金额"
              min={0}
              max={withdrawInfo?.withdrawal?.withdrawable}
            />
          </Form.Item>
        )}
      </Form>

      <Cell.Group divider={false}>
        <Cell>
          <view>当前可提现：{withdrawInfo?.withdrawal?.withdrawable}</view>
        </Cell>
        <Cell
          align="center"
          extra={
            <Button
              block
              type="primary"
              size="xlarge"
              onClick={() => {
                form?.submit();
              }}
            >
              确定提现
            </Button>
          }
        />
      </Cell.Group>
    </>
  );
};

export default withdrawal;
